/*
* @Author: "Yejing"
* @Date: 2023-06-12 15:00:44
* @LastEditors: Yejing
* @LastEditTime: 2023-06-21 17:25:24
* @Description: 修改样式
*/

<template>
	<view class="edit-container">
		<c-layout>
			<c-navigation-bar slot="head" :bgColor="true" :title="search.title">
			</c-navigation-bar>
			<view class="container-box">
				<view class="top">
					<u-avatar
						:src='vuex_user_info.avatar?$u.file.getMedieUrl(vuex_user_info.avatar):$u.file.getMedieUrl(vuex_userDefaultTopImg)'
						mode='circle' size="200" @click="changeAvatar"></u-avatar>
				</view>

				<view class="input-box">
					<view class="input-item">

						<titleInput v-model="form.nickName" focusColor="#2934D0" :title="$t('user.nickName')">
						</titleInput>
		
						<titleInput v-model="form.carNum" focusColor="#2934D0" :rule="/[\W]/g" :title="$t('user.IDNumber')">
						</titleInput>
						<titleInput v-model="form.personalIntroduction" focusColor="#2934D0" :title="$t('user.individualResume')">
						</titleInput>
						<view class="" @click="selectGender = true">
							<titleInput disabled :value="currentGender" focusColor="#2934D0" :title="$t('user.gender')">
								<u-icon class="right-icon" slot="right-icon" name="arrow-right" size="40">
								</u-icon>
							</titleInput>
						</view>
						<view class="" @click="pickerTime = true">
							<titleInput disabled v-model="form.birthday" focusColor="#2934D0" :title="$t('user.birthday')">
								<u-icon class="right-icon" slot="right-icon" name="arrow-right" size="40">
								</u-icon>
							</titleInput>
						</view>
		
						<!-- <titleInput class="address" v-model="form.address"
                                    focusColor="#2934D0" title="地址">
                            <template slot="right-icon">
                                <u-icon class="right-icon" name="map-fill" size="50" @click="addressClick()">
                                </u-icon>
                            </template>
                        </titleInput> -->
					</view>
				</view>
			</view>
			<u-button slot="footer" class="footer" type="primary" @click="save">{{$t('system.save')}}</u-button>
		</c-layout>
		<u-picker mode="time" @confirm="datePickerConfirm" :show-time-tag="false" :confirm-text="$t('system.affirm')"
			:cancel-text="$t('system.cancel')" v-model="pickerTime"></u-picker>
		<u-select v-model="selectGender" @confirm="([{value}])=>form.gender = value" :confirm-text="$t('system.affirm')"
			:cancel-text="$t('system.cancel')" :list="genderList"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//搜索
				search: {
					navType: 'navBackTitle',
					title: this.$t('user.AnchorEditor')
				},
				form: {
					name: '',
					birthday: '',
					gender: '',
					personalIntroduction: '',
					// address: '',
				},
				pickerTime: false, // 选择时间
				selectGender: false, // 选择性别
				genderList: [{
						value: 0,
						label: this.$t('user.woman')
					},
					{
						value: 1,
						label: this.$t('user.man')
					},
					{
						value: 2,
						label: this.$t('user.unknown')
					}
				],

			};
		},
		onLoad() {
			this.form = {
				...this.vuex_user_info,
				...this.vuex_anchor_info,
				gender: this.vuex_user_info.gender.code
			}
			console.log(this.form, 666);
			this.form.birthday=this.publicJS.timeZoneSwitching(this.form.birthday,'YYYY-MM-DD')
		},
		computed: {
			currentGender() {
				console.log(this.form.gender, 999);
				if (isNaN(this.form.gender)) {
					return
				} else {
					const find = this.genderList.find(f => f.value === this.form.gender)
					return find ? find.label : ''
				}
			},
		},
		methods: {
			changeAvatar() {
				uni.navigateTo({
					url: '/pages/searchInfo/components/anchorCard/anchorHomepage/bubble/editAvator'
				})
			},
			save() {
				this.$u.post('/app/anchor/edit', { ...this.form, avatar: this.vuex_user_info.avatar }).then(res => {
					this.$u.toast(res.msg)
					this.$u.init.getUserInfo()
					uni.navigateTo({
						url: '/pages/anchorConsole/anchorConsole'
					})
				})
			},
			addressClick() {
				uni.navigateTo({
					url: '/pages/searchInfo/components/anchorCard/anchorHomepage/editInfo'
				})
			},
			// 日期选中事件
			datePickerConfirm(date) {
				if (date.timestamp > Math.round(new Date().getTime() / 1000)) {
					this.$u.toast(this.$t('user.dateError'))
					this.form.birthday = ''
					return false
				}
				delete date.timestamp // 删除时间戳
				this.form.birthday = Object.values(date).join('-')
			},
		},
	}
</script>

<style lang="scss" scoped>
	.edit-container {
		position: relative;
		overflow: hidden;
		overflow-y: scroll;

		.container-box {
			display: flex;
			flex-direction: column;
			padding: 40rpx 40rpx 40rpx;

			.top {
				text-align: center;
				margin-bottom: 80rpx;

				uni-text {
					display: block;
					font-size: 36rpx;
					color: #000000;
				}
			}

			.input-box {
				.input-item {
					.title-input {
						margin-bottom: 24rpx;
					}
				}

				.right-icon {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		uni-button {
			// position: fixed;
			width: 90%;
			height: 120rpx;
			background: #2934D0;
			border-radius: 20rpx;
		}
	}
</style>